import { FC, ReactElement } from "react";
import { createPortal } from "react-dom";

import styled from "./styled.module.scss";

interface Props {
  children: ReactElement;
  state: boolean;
  setState: (data: boolean) => void;
}
const Index: FC<Props> = ({ state, setState, children }) => {
  const element = (
    <div className={styled.dialog}>
      <button onClick={() => setState(false)}>x</button>
      <div className={styled.content}>{children}</div>
    </div>
  );

  // React.createPortal(虚拟DOM / JSX, document.qs("body"));
  return (
    <>
      {state &&
        createPortal(
          element,
          document.querySelector("body") as HTMLBodyElement
        )}
    </>
  );
};

export default Index;
